Angular Material Select কম্পোনেন্ট একটি ড্রপডাউন সিলেক্ট মেনু যা ব্যবহারকারীদের নির্দিষ্ট অপশন থেকে একটি মান নির্বাচন করতে দেয়। এটি Material Design এর একটি অংশ এবং এটি MatSelect কম্পোনেন্টের মাধ্যমে তৈরি করা হয়। MatSelect একটি ফ্লেক্সিবল সিলেক্ট কম্পোনেন্ট যা বিভিন্ন অপশন প্রদর্শন করতে পারে এবং তা সহজেই কাস্টমাইজ করা যায়।

MatSelect কম্পোনেন্টের ব্যবহার

MatSelect কম্পোনেন্ট সাধারণত ব্যবহারকারীর জন্য একটি তালিকা বা ড্রপডাউন মেনু তৈরি করতে ব্যবহৃত হয়, যেখানে তারা এক বা একাধিক অপশন সিলেক্ট করতে পারে। এটি একটি উন্নত সিলেক্ট UI প্রদান করে, যা ইন্টারেক্টিভ এবং ব্যবহারকারী-বান্ধব হয়।

MatSelect এর বেসিক উদাহরণ

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select [(value)]="selectedOption">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

এখানে, MatSelect কম্পোনেন্টের মধ্যে mat-option কম্পোনেন্ট ব্যবহৃত হয়েছে, যার মাধ্যমে বিভিন্ন অপশন যোগ করা হয়েছে। ব্যবহারকারী যেকোনো একটি অপশন নির্বাচন করতে পারে, এবং তার মান selectedOption ভেরিয়েবলে সংরক্ষিত হবে।

MatSelect এর বিভিন্ন কনফিগারেশন

১. Multiselect (একাধিক অপশন নির্বাচন)

যদি আপনি ব্যবহারকারীদের একাধিক অপশন নির্বাচন করার সুযোগ দিতে চান, তাহলে multiple অ্যাট্রিবিউট ব্যবহার করতে পারেন।

<mat-form-field appearance="fill">
  <mat-label>Choose options</mat-label>
  <mat-select [(value)]="selectedOptions" multiple>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

এখানে, multiple অ্যাট্রিবিউট যোগ করার মাধ্যমে ব্যবহারকারী একাধিক অপশন সিলেক্ট করতে পারবে। নির্বাচিত মানগুলি selectedOptions ভেরিয়েবলে সংরক্ষিত হবে।

২. ডিফল্ট মান নির্বাচন

আপনি ডিফল্ট মান নির্বাচন করতে ngModel বা [(value)] ব্যবহার করতে পারেন।

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select [(value)]="selectedOption">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

এখানে, selectedOption ভেরিয়েবলে আপনি একটি ডিফল্ট মান সেট করে দিতে পারেন, যেমন:

export class MyComponent {
  selectedOption = 'option2'; // Default selection
}

৩. ডিসেবল অপশন

আপনি যদি কোনও অপশনকে নিষ্ক্রিয় করতে চান, তাহলে disabled অ্যাট্রিবিউট ব্যবহার করতে পারেন।

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select [(value)]="selectedOption">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2" disabled>Option 2 (Disabled)</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

এখানে, Option 2 নিষ্ক্রিয় করা হয়েছে এবং এটি ব্যবহারকারী সিলেক্ট করতে পারবে না।

৪. সার্চেবল সিলেক্ট (Searchable Select)

আপনি MatSelect কে সার্চযোগ্য করতে চাইলে, Angular Material এর সাথে mat-autocomplete ব্যবহার করতে পারেন। এর মাধ্যমে ব্যবহারকারী একটি ইনপুট ফিল্ডে টাইপ করে দ্রুত একটি অপশন খুঁজে পেতে পারে।

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select [(value)]="selectedOption">
    <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
  </mat-select>
</mat-form-field>

এখানে, options একটি অ্যারে হবে যা আপনার অপশনগুলো ধারণ করবে। এই অ্যারে থেকে ডাইনামিকভাবে অপশনগুলি তৈরি করা হবে।

MatSelect কাস্টমাইজেশন

১. ড্রপডাউন সিলেক্ট এর স্টাইলিং

MatSelect এবং mat-option কম্পোনেন্টের স্টাইল কাস্টমাইজ করা যায় CSS বা SCSS ব্যবহার করে। উদাহরণস্বরূপ:

.mat-select-trigger {
  color: #FF5733;
}

.mat-option:hover {
  background-color: #e0f7fa;
}

২. এন্টার/ট্যাব কী সাপোর্ট

Angular Material সিলেক্ট কম্পোনেন্ট ইতিমধ্যেই এন্টার/ট্যাব কী সাপোর্ট করে, কিন্তু আপনি যদি এটি কাস্টমাইজ করতে চান, তাহলে কীবোর্ড ইভেন্ট হ্যান্ডলার ব্যবহার করতে পারেন।

<mat-select (keydown.enter)="onSelect()" [(value)]="selectedOption">
  <mat-option value="option1">Option 1</mat-option>
  <mat-option value="option2">Option 2</mat-option>
</mat-select>

এখানে, keydown.enter ইভেন্টের মাধ্যমে আপনি বিশেষ কোনো অ্যাকশন ট্রিগার করতে পারেন।

Angular Material এর MatSelect কম্পোনেন্ট একটি শক্তিশালী এবং ব্যবহারকারী-বান্ধব সিলেক্ট মেনু তৈরি করতে সাহায্য করে, যা Material Design অনুসরণ করে। এটি বিভিন্ন কনফিগারেশন এবং কাস্টমাইজেশন অপশন প্রদান করে, যেমন একাধিক অপশন সিলেকশন, ডিসেবল অপশন, ডিফল্ট মান এবং সার্চ ফিচার। Angular Material সিলেক্ট কম্পোনেন্ট ব্যবহার করে আপনি খুব সহজেই একটি উন্নত এবং রেসপন্সিভ ড্রপডাউন মেনু তৈরি করতে পারবেন যা আপনার অ্যাপ্লিকেশনের ব্যবহারকারীর অভিজ্ঞতা উন্নত করবে।

Angular Material Select কম্পোনেন্টটি একটি ড্রপডাউন সিলেক্ট লিস্ট তৈরির জন্য ব্যবহৃত হয়। এটি ব্যবহারকারীদের কাছে একটি পরিষ্কার এবং স্বচ্ছল ইন্টারফেসে বিভিন্ন অপশন সিলেক্ট করার সুযোগ দেয়। Angular Material Select কম্পোনেন্টটি সাধারণ HTML সিলেক্ট ট্যাগের মতো কাজ করে তবে এটি আরও আধুনিক এবং উন্নত ডিজাইন ও ফিচার সরবরাহ করে, যেমন ইমেজ সহ অপশন, মাল্টিপল সিলেকশন, এবং কাস্টমাইজড লেবেল ইত্যাদি।

Material Select এর সুবিধা

• ব্যবহারকারীর অভিজ্ঞতা উন্নত করা: Angular Material Select সিলেক্ট লিস্টের ডিজাইন উন্নত করে, যা অধিক কার্যকর এবং সুন্দর।
• রেসপন্সিভ ডিজাইন: এটি সমস্ত ধরনের ডিভাইসের জন্য উপযোগী।
• সহজ কাস্টমাইজেশন: আপনি লেবেল, অপশন, আউটপুট ইভেন্ট এবং আরও অনেক কিছু কাস্টমাইজ করতে পারবেন।
• অ্যাক্সেসিবিলিটি: Angular Material Select অ্যাক্সেসিবিলিটি স্ট্যান্ডার্ড মেনে চলে, যা স্ক্রিন রিডার এবং কীবোর্ড নেভিগেশনের জন্য উপযুক্ত।

Material Select ব্যবহার করার ধাপসমূহ

১. Angular Material এর Select মডিউল ইমপোর্ট করা

প্রথমে, MatSelectModule মডিউলটি app.module.ts ফাইলে ইমপোর্ট করতে হবে।

import { MatSelectModule } from '@angular/material/select';

@NgModule({
  imports: [
    MatSelectModule
  ]
})
export class AppModule { }

২. HTML এ Material Select ব্যবহার করা

এখন, আপনার HTML ফাইলে mat-select ট্যাগ ব্যবহার করে সিলেক্ট ড্রপডাউন তৈরি করতে হবে। এর মধ্যে mat-option ট্যাগ ব্যবহার করে অপশনগুলো নির্ধারণ করতে হবে।

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select>
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

• mat-form-field: এটি একটি Angular Material ফর্ম ফিল্ড, যা সিলেক্টের লেবেল এবং আউটপুট স্টাইল কাস্টমাইজ করতে সাহায্য করে।
• mat-label: সিলেক্ট ফিল্ডের লেবেল হিসেবে কাজ করে।
• mat-select: এটি মূল সিলেক্ট কম্পোনেন্ট।
• mat-option: সিলেক্ট অপশনগুলো নির্ধারণ করতে ব্যবহৃত হয়।

৩. Angular Form এ Material Select ব্যবহার করা

যদি আপনি Angular Reactive Forms বা Template-driven Forms ব্যবহার করতে চান, তবে FormControl ব্যবহার করতে হবে।

Reactive Forms ব্যবহার করে:

import { FormControl } from '@angular/forms';

export class AppComponent {
  selectedOption = new FormControl('');
}

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select [formControl]="selectedOption">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

Template-driven Forms ব্যবহার করে:

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select [(ngModel)]="selectedOption">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

৪. সিলেক্ট অপশন ডাইনামিকভাবে লোড করা

Angular Material Select এ আপনি ডাইনামিক অপশনও যোগ করতে পারেন। উদাহরণস্বরূপ, আপনি একটি লিস্ট বা অ্যারে থেকে অপশনগুলো লোড করতে পারেন।

export class AppComponent {
  options = ['Option 1', 'Option 2', 'Option 3'];
}

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select [(ngModel)]="selectedOption">
    <mat-option *ngFor="let option of options" [value]="option">{{ option }}</mat-option>
  </mat-select>
</mat-form-field>

৫. Multiple Selection (একাধিক অপশন সিলেকশন)

Material Select কম্পোনেন্টটি একাধিক অপশন সিলেক্ট করতে সমর্থন করে। এর জন্য multiple অ্যাট্রিবিউট ব্যবহার করতে হয়।

<mat-form-field appearance="fill">
  <mat-label>Choose options</mat-label>
  <mat-select multiple [(ngModel)]="selectedOptions">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2">Option 2</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>

• multiple: একাধিক অপশন সিলেক্ট করার জন্য।

৬. Custom Option (কাস্টম অপশন) ব্যবহার করা

আপনি চাইলে mat-option এর ভিতরে আরও কাস্টম কন্টেন্ট (যেমন, ছবি) যোগ করতে পারেন।

<mat-form-field appearance="fill">
  <mat-label>Choose an option</mat-label>
  <mat-select>
    <mat-option value="option1">
      <img src="path/to/image1.jpg" alt="Image 1"> Option 1
    </mat-option>
    <mat-option value="option2">
      <img src="path/to/image2.jpg" alt="Image 2"> Option 2
    </mat-option>
  </mat-select>
</mat-form-field>

Material Select এর অতিরিক্ত বৈশিষ্ট্য

1. Searchable Dropdown: Angular Material Select এ আপনি সার্চ ফিচারও যোগ করতে পারেন, যার মাধ্যমে ব্যবহারকারী দ্রুত অপশন খুঁজে পেতে পারেন।
2. Error Messages: ফিল্ড ভ্যালিডেশন এবং এরর মেসেজ সাপোর্ট।
3. Disabling Select: আপনি Select কম্পোনেন্টকে ডisable করতে পারেন [disabled] অ্যাট্রিবিউট ব্যবহার করে।

<mat-select [disabled]="isDisabled">
  <mat-option value="option1">Option 1</mat-option>
  <mat-option value="option2">Option 2</mat-option>
</mat-select>

Angular Material Select হল একটি অত্যন্ত কার্যকর এবং কাস্টমাইজযোগ্য ড্রপডাউন কম্পোনেন্ট, যা Angular অ্যাপ্লিকেশনে ড্রপডাউন মেনু তৈরি করতে ব্যবহৃত হয়। এটি বিভিন্ন বৈশিষ্ট্য যেমন একাধিক অপশন সিলেকশন, কাস্টম অপশন, এবং ডাইনামিক অপশন লোডিং সমর্থন করে। Angular Material Select ব্যবহার করে আপনি সহজেই সুন্দর, রেসপন্সিভ, এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এমন সিলেক্ট লিস্ট তৈরি করতে পারবেন।

Angular Material একটি জনপ্রিয় UI লাইব্রেরি যা ম্যাটেরিয়াল ডিজাইন গাইডলাইন অনুসরণ করে এবং অ্যাঙ্গুলার অ্যাপ্লিকেশনগুলির জন্য বিভিন্ন প্রি-বিল্ট কম্পোনেন্ট সরবরাহ করে। এর মধ্যে একটি জনপ্রিয় কম্পোনেন্ট হল MatSelect, যা ড্রপডাউন সিলেক্ট বক্স তৈরি করতে ব্যবহৃত হয়। মাল্টিপল সিলেকশন সাপোর্টের মাধ্যমে ব্যবহারকারীরা একাধিক অপশন সিলেক্ট করতে পারেন। এই টিউটোরিয়ালে, আমরা Angular Material এর MatSelect কম্পোনেন্ট ব্যবহার করে মাল্টিপল সিলেকশন তৈরি করার পদ্ধতি জানবো।

MatSelect কম্পোনেন্ট এবং মাল্টিপল সিলেকশন

MatSelect কম্পোনেন্টটি ড্রপডাউন মেনু তৈরি করতে ব্যবহৃত হয়, যেখানে multiple অ্যাট্রিবিউট যুক্ত করলে একাধিক অপশন সিলেক্ট করা সম্ভব হয়। এই ফিচারটি সাধারণত ফর্মগুলিতে, যেখানে একাধিক অপশন সিলেক্ট করার প্রয়োজন থাকে, ব্যবহৃত হয়।

মাল্টিপল সিলেকশন তৈরি করা

১. Angular Material ইন্সটল করা

প্রথমেই Angular Material ইনস্টল করতে হবে, যদি আগে থেকে ইন্সটল না থাকে:

npm install @angular/material

২. MatSelectModule ইমপোর্ট করা

আপনার app.module.ts ফাইলে MatSelectModule ইমপোর্ট করতে হবে:

import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  declarations: [AppComponent],
  imports: [MatSelectModule, MatFormFieldModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

৩. HTML কোডে মাল্টিপল সিলেকশন ব্যবহার করা

এখন MatSelect কম্পোনেন্টে multiple অ্যাট্রিবিউট ব্যবহার করে একাধিক অপশন সিলেক্ট করতে পারবেন। নিচে একটি উদাহরণ দেওয়া হলো:

<mat-form-field appearance="fill">
  <mat-label>Select multiple options</mat-label>
  <mat-select multiple [(value)]="selectedOptions">
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option }}
    </mat-option>
  </mat-select>
</mat-form-field>

৪. Typescript কোড

এখানে selectedOptions একটি অ্যারে, যা সিলেক্ট করা অপশনগুলো ধারণ করবে, এবং options হল সিলেক্ট করতে পারা অপশনগুলির একটি অ্যারে।

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];
  selectedOptions = ['Option 1']; // Default selected option
}

এখানে, [(value)]="selectedOptions" ব্যবহার করা হয়েছে, যাতে সিলেক্ট করা অপশনগুলো selectedOptions অ্যারে-তে স্টোর হয়।

মাল্টিপল সিলেকশন কাস্টমাইজ করা

১. ডিফল্ট সিলেকশন

আপনি selectedOptions অ্যারে-তে ডিফল্ট ভ্যালু দিয়ে কিছু অপশন সিলেক্ট করতে পারেন। যেমন:

selectedOptions = ['Option 1', 'Option 3'];

এতে প্রথমে Option 1 এবং Option 3 সিলেক্ট হবে।

২. কাস্টম স্টাইল এবং লেবেল

আপনি mat-form-field এর appearance অ্যাট্রিবিউট ব্যবহার করে ফিল্ডের স্টাইল কাস্টমাইজ করতে পারেন:

<mat-form-field appearance="outline">
  <mat-label>Select multiple options</mat-label>
  <mat-select multiple [(value)]="selectedOptions">
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option }}
    </mat-option>
  </mat-select>
</mat-form-field>

এখানে appearance="outline" এর মাধ্যমে আউটলাইন স্টাইল প্রদান করা হয়েছে।

৩. ডাইনামিক অপশন পরিবর্তন

আপনি চাইলে options অ্যারে এর উপাদান ডাইনামিকভাবে পরিবর্তন করতে পারেন:

options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];

// Dynamically adding an option
addOption(option: string) {
  this.options.push(option);
}

এটি addOption() মেথডে নতুন অপশন অ্যারে-তে যোগ করবে এবং ড্রপডাউনে তা দেখাবে।

৪. ডিফল্ট ওয়ালিডেশন

Angular Reactive Forms বা Template Driven Forms ব্যবহার করলে, আপনি mat-select এর সাথে ওয়ালিডেশন যোগ করতে পারেন। যেমন:

<mat-form-field appearance="fill">
  <mat-label>Select multiple options</mat-label>
  <mat-select multiple formControlName="selectedOptions" required>
    <mat-option *ngFor="let option of options" [value]="option">
      {{ option }}
    </mat-option>
  </mat-select>
  <mat-error *ngIf="formControl.hasError('required')">
    You must select at least one option
  </mat-error>
</mat-form-field>

এখানে required অ্যাট্রিবিউট ব্যবহার করে অপশন সিলেকশনের জন্য ওয়ালিডেশন যোগ করা হয়েছে।

Angular Material এর MatSelect কম্পোনেন্ট মাল্টিপল সিলেকশন করার একটি সহজ এবং কার্যকরী উপায়। এটি বিভিন্ন ধরনের ফর্মের জন্য উপযোগী, যেখানে ব্যবহারকারীকে একাধিক অপশন নির্বাচন করার সুযোগ দেওয়া হয়। multiple অ্যাট্রিবিউট ব্যবহার করে ড্রপডাউন তালিকা থেকে একাধিক আইটেম সিলেক্ট করা যায়, এবং ngFor দিয়ে অপশনগুলি ডাইনামিকভাবে তৈরি করা যায়। Angular Material এর সঠিক কনফিগারেশন ও কাস্টমাইজেশন দিয়ে আপনি একটি সুন্দর এবং ব্যবহারযোগ্য মাল্টিপল সিলেকশন ফিচার তৈরি করতে পারবেন।